﻿@* Muaz Khan – http://dashingquill.web.officelive.com *@
@model DatabaseEntities
@{
    var user = Static.CurrentUser;
    
    ViewBag.Title = user.FullName +  " - Circles";    
    var circles = Model.Circles.Where(c => c.UserToken == user.UniqueToken);
}

@section H1
{
    <h1>@user.FullName's Circles</h1>
}

@section Meta
{
    <meta name="robots" content="nofollow noindex" />
    <link href="@Url.Content("~/Content/Styles/dashingquill.circles.css")" rel="stylesheet" type="text/css" />
}

@section UserName
{    
    @if(user != null)
    {
        <div id="you" accesskey="@user.UniqueToken">@user.FullName.Truncate(20)</div>
    }    
}

<div class="list-container">
    <table>
        <thead>
            <th>Circle Name</th>
            <th>Members Count</th>
            <th>Created At</th>
            <th>Delete</th>
        </thead>
        @foreach (var circle in circles.OrderByDescending(c => c.Id))
        {
            <tr id="@circle.Token" class="circle-row">
                <td>
                    <div class="circle-name">@circle.Name</div>
                </td>
                <td>
                    <div class="members">
                        <span class="Members-Count">@circle.MembersCount</span>
                        @if (circle.MembersCount > 0)
                        {
                            <span style="color:Gray;" class="Members-Names">(@Model.GetCircleMembersNames(circle.Members))</span>
                        }
                        else
                        {
                            <span style="color:Gray;" class="Members-Names">(No members yet!)</span>
                        }
                    </div>
                    <div id="users-list" class="users-list"></div>
                </td>
                <td>@circle.CreationDate.ToLongDateString()</td>
                <td><div class="delete">Delete</div></td>
            </tr>
        }
    </table>
</div>

@if (circles.Count() <= 0)
{
    <div style="padding: 20px; border: 1px solid red; font-size: 20px; color: red;">
        You've not created any circle, yet!
        <p style="color:Gray;">
            To create a circle, open any user's home-page and open his about-section and then click <strong>Not in your circle</strong> red-button, go ahead and follow new users, create new circles and ...
        </p>
    </div>
}

@section JavaScript
{
    <script type="text/javascript" src="@Url.Content("~/Content/JavaScript/dashingquill.circles.js")"></script>
}